<template>
  <div>
    <div class="page-title">区域单位配置</div>
    <div class="page-content">
      <el-form
        label-width="120px"
        :model="submitData"
        ref="submitData"
        style="width: 100%"
      >
        <div>
          <el-form-item label="区域：">
            <el-select
              @change="
                getTableData();
                getNewWork();
              "
              v-model="area"
              placeholder="请选择区域"
              filterable
              clearable
              value-key="dictCode"
            >
              <el-option
                v-for="item in areas"
                :value="item"
                :key="item.dictCode"
                :label="item.name"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-tag type="success">任务队</el-tag>
          <el-cascader
            ref="refHandle1"
            style="width: 50%"
            placeholder="请选择单位"
            v-model="team"
            :options="newWork"
            clearable
            filterable
            :props="{
              expandTrigger: 'hover',
              value: 'nodeCode',
              label: 'label',
              children: 'children',
              multiple: true,
            }"
            :show-all-levels="true"
          ></el-cascader>
          <el-button type="primary" size="mini" @click="addTeam()"
            >确认添加</el-button
          >
          <el-button type="primary" size="mini" @click="deleteSelectedTeam01">删除选中项</el-button>
          <el-table
            height="350"
            :data="postData.tableTeam"
            style="width: 100%"
            @selection-change="handleSelectionChange01"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column label="地区" prop="areaName"> </el-table-column>
            <el-table-column label="作业队" prop="companName">
            </el-table-column>
            <el-table-column label="操作" align="center" header-align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="deleteTeam(scope.row)"
                  type="primary"
                  >删除</el-button
                >
              </template>
            </el-table-column>
            <el-table-column align="right"> </el-table-column>
          </el-table>

          <el-tag type="success">生产辅助班组</el-tag>
          <el-cascader
            style="width: 50%"
            v-model="group"
            :options="newWork"
            clearable
            filterable
            ref="refHandle2"
            :props="{
              expandTrigger: 'hover',
              value: 'nodeCode',
              label: 'label',
              children: 'children',
              multiple: true,
            }"
            :show-all-levels="true"
          ></el-cascader>
          <el-button type="primary" size="mini" @click="addGroup()"
            >确认添加</el-button
          >
          <el-button type="primary" size="mini" @click="deleteSelectedTeam02">删除选中项</el-button>
          <el-table
            max-height="250"
            :data="postData.tableGroup"
            style="width: 100%"
            @selection-change="handleSelectionChange02"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column label="地区" prop="areaName"> </el-table-column>
            <el-table-column label="辅助班组" prop="companName">
            </el-table-column>
            <el-table-column label="操作" align="center" header-align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="deleteGroup(scope.row)"
                  type="primary"
                  >删除</el-button
                >
              </template>
            </el-table-column>
            <el-table-column align="right"> </el-table-column>
          </el-table>

          <el-tag type="success">重点部位</el-tag>
          <el-cascader
            style="width: 50%"
            v-model="location"
            :options="newWork"
            clearable
            filterable
            ref="refHandle3"
            :props="{
              expandTrigger: 'hover',
              value: 'nodeCode',
              label: 'label',
              children: 'children',
              multiple: true,
            }"
            :show-all-levels="true"
          ></el-cascader>
          <el-button type="primary" size="mini" @click="addLocation()"
            >确认添加</el-button
          >
          <el-button type="primary" size="mini" @click="deleteSelectedTeam03">删除选中项</el-button>
          <el-table
            max-height="250"
            :data="postData.tableLocation"
            style="width: 100%"
            @selection-change="handleSelectionChange03"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column label="地区" prop="areaName"> </el-table-column>
            <el-table-column label="重点部位" prop="companName">
            </el-table-column>
            <el-table-column label="操作" align="center" header-align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="deleteLocation(scope.row)"
                  type="primary"
                  >删除</el-button
                >
              </template>
            </el-table-column>
            <el-table-column align="right">
              <template slot="header"> </template>
            </el-table-column>
          </el-table>
          <br />
        </div>
        <div align="center" header-align="center">
          <el-button type="primary" @click="handleSubmit('submitData')"
            >保存</el-button
          >
          <el-button type="danger" @click="cancel()" style="margin-left: 20px"
            >取消</el-button
          >
        </div>
      </el-form>
    </div>
  </div>
</template>


<script>
import {
  getGroups,
  updateAreaCompany,
  getSupervisionArea,
  getCheckCompanys,
} from "../../../services/task_issue";
export default {
  mounted() {
    this.getAreas();
  },
  methods: {
    //选项发生改变
    handleSelectionChange01(val) {
      this.multipleSelection01 = val;
      //   console.log(111, this.multipleSelection);
    },
    handleSelectionChange02(val) {
      this.multipleSelection02 = val;
      //   console.log(111, this.multipleSelection);
    },
    handleSelectionChange03(val) {
      this.multipleSelection03 = val;
      //   console.log(111, this.multipleSelection);
    },



    //批量删除
    deleteSelectedTeam01() {
      this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
          for (let key in this.multipleSelection01) {
            for (let item in this.postData.tableTeam) {
              if (this.multipleSelection01[key].companyCode == this.postData.tableTeam[item].companyCode) {
                  this.$delete(this.postData.tableTeam, item);
                // console.log(333,this.multipleSelection[key].companyCode);
              }
            }
          }
        }).catch(() => {});
    },
    deleteSelectedTeam02() {
      this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
          for (let key in this.multipleSelection02) {
            for (let item in this.postData.tableGroup) {
              if (this.multipleSelection02[key].companyCode == this.postData.tableGroup[item].companyCode) {
                  this.$delete(this.postData.tableGroup, item);
                // console.log(333,this.multipleSelection[key].companyCode);
              }
            }
          }
        }).catch(() => {});
    },
    deleteSelectedTeam03() {
      this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
          for (let key in this.multipleSelection03) {
            for (let item in this.postData.tableLocation) {
              if (this.multipleSelection03[key].companyCode == this.postData.tableLocation[item].companyCode) {
                  this.$delete(this.postData.tableLocation, item);
                // console.log(333,this.multipleSelection[key].companyCode);
              }
            }
          }
        }).catch(() => {});
    },










    getAreas() {
      getGroups()
        .then((res) => {
          this.areas = res.data;
        })
        .catch((err) => {
          this.$message.error(err.message);
        });
    },
    getNewWork() {
      this.query.areaName = this.area.name;
      this.query.SupervisionAreaID = this.area.dictCode;
      getCheckCompanys(this.query).then((res) => {
        this.newWork = res.data;
      });
    },
    addTeam() {
      var flag = true;
      if (this.team.length != 0) {
        for (var key in this.postData.tableTeam) {
          if (
            this.$refs["refHandle1"].getCheckedNodes()[0].value ==
            this.postData.tableTeam[key].companCode
          ) {
            this.$confirm("不能重复添加！", "提示", {
              confirmButtonText: "确定",
              type: "warning",
            });
            flag = false;
          }
        }
        if (flag) {
          var teamNum = 0;
          this.team.map((item) => {
            this.newTeam[teamNum] = item[item.length - 1];
            teamNum++;
          });
          this.newTeam = this.newTeam.map((item) => {
            for (
              teamNum = 0;
              teamNum < this.$refs["refHandle1"].getCheckedNodes().length;
              teamNum++
            ) {
              if (
                item ==
                this.$refs["refHandle1"].getCheckedNodes()[teamNum].value
              ) {
                return {
                  supervisionAreaID: this.area.dictCode,
                  areaName: this.area.name,
                  companCode: item,
                  companName: this.$refs["refHandle1"].getCheckedNodes()[
                    teamNum
                  ].label,
                  companyType: "作业队",
                };
              }
            }
          });
          for (teamNum = 0; teamNum < this.newTeam.length; teamNum++) {
            this.postData.tableTeam.push(this.newTeam[teamNum]);
          }
          //     this.newTeam.supervisionAreaID=this.area.dictCode
          // this.newTeam.areaName=this.area.name
          // this.newTeam.companCode=this.$refs["refHandle1"].getCheckedNodes()[0].value
          // this.newTeam.companName=this.$refs["refHandle1"].getCheckedNodes()[0].label
          // this.newTeam.companyType="作业队"
          // this.postData.tableTeam.push(this.newTeam)
          this.team = [];
          this.newTeam = [];
        }
      } else {
        this.$confirm("不能添加为空！", "提示", {
          confirmButtonText: "确定",
          type: "warning",
        });
      }
    },
    addGroup() {
      var flag = true;
      if (this.group.length != 0) {
        for (var key in this.postData.tableGroup) {
          if (
            this.$refs["refHandle2"].getCheckedNodes()[0].value ==
            this.postData.tableGroup[key].companCode
          ) {
            this.$confirm("不能重复添加！", "提示", {
              confirmButtonText: "确定",
              type: "warning",
            });
            flag = false;
          }
        }
        if (flag) {
          var groupNum = 0;
          this.group.map((item) => {
            this.newGroup[groupNum] = item[item.length - 1];
            groupNum++;
          });
          this.newGroup = this.newGroup.map((item) => {
            for (
              groupNum = 0;
              groupNum < this.$refs["refHandle2"].getCheckedNodes().length;
              groupNum++
            ) {
              if (
                item ==
                this.$refs["refHandle2"].getCheckedNodes()[groupNum].value
              ) {
                return {
                  supervisionAreaID: this.area.dictCode,
                  areaName: this.area.name,
                  companCode: item,
                  companName: this.$refs["refHandle2"].getCheckedNodes()[
                    groupNum
                  ].label,
                  companyType: "配属班组",
                };
              }
            }
          });
          for (groupNum = 0; groupNum < this.newGroup.length; groupNum++) {
            this.postData.tableGroup.push(this.newGroup[groupNum]);
          }
          //     this.newGroup.supervisionAreaID=this.area.dictCode
          // this.newGroup.areaName=this.area.name
          // this.newGroup.companCode=this.$refs["refHandle2"].getCheckedNodes()[0].value
          // this.newGroup.companName=this.$refs["refHandle2"].getCheckedNodes()[0].label
          // this.newGroup.companyType="配属班组"
          // this.postData.tableGroup.push(this.newGroup)
          this.group = [];
          this.newGroup = [];
        }
      } else {
        this.$confirm("不能添加为空！", "提示", {
          confirmButtonText: "确定",
          type: "warning",
        });
      }
    },
    addLocation() {
      var flag = true;
      if (this.location.length != 0) {
        for (var key in this.postData.tableLocation) {
          if (
            this.$refs["refHandle3"].getCheckedNodes()[0].value ==
            this.postData.tableLocation[key].companCode
          ) {
            this.$confirm("不能重复添加！", "提示", {
              confirmButtonText: "确定",
              type: "warning",
            });
            flag = false;
          }
        }
        if (flag) {
          var locationNum = 0;
          this.location.map((item) => {
            this.newLocation[locationNum] = item[item.length - 1];
            locationNum++;
          });
          this.newLocation = this.newLocation.map((item) => {
            for (
              locationNum = 0;
              locationNum < this.$refs["refHandle3"].getCheckedNodes().length;
              locationNum++
            ) {
              if (
                item ==
                this.$refs["refHandle3"].getCheckedNodes()[locationNum].value
              ) {
                return {
                  supervisionAreaID: this.area.dictCode,
                  areaName: this.area.name,
                  companCode: item,
                  companName: this.$refs["refHandle3"].getCheckedNodes()[
                    locationNum
                  ].label,
                  companyType: "重点要害部位及固定场所",
                };
              }
            }
          });
          for (
            locationNum = 0;
            locationNum < this.newLocation.length;
            locationNum++
          ) {
            this.postData.tableLocation.push(this.newLocation[locationNum]);
          }
          //     this.newLocation.supervisionAreaID=this.area.dictCode
          // this.newLocation.areaName=this.area.name
          // this.newLocation.companCode=this.$refs["refHandle3"].getCheckedNodes()[0].value
          // this.newLocation.companName=this.$refs["refHandle3"].getCheckedNodes()[0].label
          // this.newLocation.companyType="重点要害部位及固定场所"
          // this.postData.tableLocation.push(this.newLocation)
          this.newLocation = [];
          this.location = [];
        }
      } else {
        this.$confirm("不能添加为空！", "提示", {
          confirmButtonText: "确定",
          type: "warning",
        });
      }
    },

    deleteTeam(row) {
      this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          for (let item in this.postData.tableTeam) {
            if (row.companyCode == this.postData.tableTeam[item].companyCode) {
              this.$delete(this.postData.tableTeam, item);
            }
          }
        })
        .catch(() => {});
    },
    deleteGroup(row) {
      this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          for (let item in this.postData.tableGroup) {
            if (row.companyCode == this.postData.tableGroup[item].companyCode) {
              this.$delete(this.postData.tableGroup, item);
            }
          }
        })
        .catch(() => {});
    },
    deleteLocation(row) {
      this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          for (let item in this.postData.tableLocation) {
            if (
              row.companyCode == this.postData.tableLocation[item].companyCode
            ) {
              this.$delete(this.postData.tableLocation, item);
            }
          }
        })
        .catch(() => {});
    },
    getTableData() {
      this.query.areaName = this.area.name;
      this.query.SupervisionAreaID = this.area.dictCode;
      getSupervisionArea(this.query)
        .then((res) => {
          this.postData.tableTeam = res.team;
          this.postData.tableGroup = res.group;
          this.postData.tableLocation = res.location;
        })
        .catch((err) => {
          this.$message.error(err.message);
        });
    },
    cancel() {
      this.area = {};
      this.team = [];
      this.group = [];
      this.location = [];
      this.postData.tableTeam = [];
      this.postData.tableGroup = [];
      this.postData.tableLocation = [];
      this.submitData.supervisionAreaID = "";
      this.submitData.superVisionAreaCompanies = [];
    },
    handleSubmit() {
      this.submitData.supervisionAreaID = this.area.dictCode;
      for (let item of this.postData.tableTeam) {
        var tmp = new Object();
        tmp.supervisionAreaID = item.supervisionAreaID;
        tmp.areaName = item.areaName;
        tmp.companCode = item.companCode;
        tmp.companName = item.companName;
        tmp.companyType = item.companyType;
        this.submitData.superVisionAreaCompanies.push(tmp);
      }
      for (let item of this.postData.tableGroup) {
        var tmp = new Object();
        tmp.supervisionAreaID = item.supervisionAreaID;
        tmp.areaName = item.areaName;
        tmp.companCode = item.companCode;
        tmp.companName = item.companName;
        tmp.companyType = item.companyType;
        this.submitData.superVisionAreaCompanies.push(tmp);
      }
      for (let item of this.postData.tableLocation) {
        var tmp = new Object();
        tmp.supervisionAreaID = item.supervisionAreaID;
        tmp.areaName = item.areaName;
        tmp.companCode = item.companCode;
        tmp.companName = item.companName;
        tmp.companyType = item.companyType;
        this.submitData.superVisionAreaCompanies.push(tmp);
      }
      updateAreaCompany(this.submitData)
        .then(() => {
          this.$message.success("保存成功");
          this.getTableData();
          this.getNewWork();
          this.submitData.superVisionAreaCompanies = [];
        })
        .catch((err) => {
          this.$message.error(err.message);
        });
    },
  },

  data() {
    return {
      multipleSelection01: [],
      multipleSelection02:[],
      multipleSelection03:[],


      area: {},
      areas: [],
      team: [],
      group: [],
      location: [],
      query: {
        SupervisionAreaID: "",
        areaName: "",
      },
      submitData: {
        supervisionAreaID: "",
        superVisionAreaCompanies: [],
      },
      postData: {
        tableTeam: [],
        tableGroup: [],
        tableLocation: [],
      },
      newWork: [],
      newTeam: [],
      newGroup: [],
      newLocation: [],
    };
  },
};
</script>

<style>
.el-checkbox {
  margin-left: 25px;
}

.cutting {
  padding: 0 0px 0px;
  margin: 20px 0px;
  line-height: 1px;
  border-left: 750px solid rgb(221, 221, 221);
  border-right: 750px solid rgb(221, 221, 221);
  text-align: center;
  height: 2px;
  width: 100%;
}
</style>